<template>
    <div class="gesc">
        <header><h2>主编推荐</h2>
            <div class="btn" @click="change">换一批</div>
        </header>
        <div class="m-focus">
            <div class="tabs">
                <ul class="f-cb">
                    <li @mouseenter="onceenter" :class="{crt:showmessage} ">
                        <span>小说</span>
                    </li>
                    <li :class=" {ll:true,crt:!showmessage }" @mouseenter="secondenter" >
                        <span>图书</span>
                    </li>
                </ul>
            </div>
            <div class="contents">
                <div class="tab-item" v-show="showmessage">
                    <ul class="book f-cb">
                        <li v-for="(item, index) in showData" :key="index">
                            <div class="m-book-info f-cb">
                                <a class="cover" href="javascript:void(0)">
                                    <img class="img" :src="item.cover">
                                </a>
                                <h3 class="" ref="title">{{item.title}}</h3>
                                <p class="" ref="author">{{item.author}}</p>
                                <p class="disc eps" ref="result">{{resultText(item)}}</p>
                                <a class="read" href="javascript:void(0)" @click="showBookDetail(item)">立即阅读>>></a>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="tab-item" v-show="!showmessage" >
                    <ul class="book f-cb">
                        <li v-for="item in PaihangList" :key="item.index">
                            <div class="m-book-info f-cb">
                                <a class="cover" href="javascript:void(0)">
                                    <img :src='item.imgurl' alt="">
                                </a>
                                <h3>{{item.name}}</h3>
                                <p>{{item.host}}</p>
                                <p class='disc eps'>{{item.message}}</p>
                                <a class="read" href="javascript:void(0)">立即阅读>>></a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import { storeHomeMixin } from '../../utils/mixin'

    export default {
        mixins: [storeHomeMixin],
    props: {
        data: Array
    },
    data(){

        return{
            showmessage:true,
                    index: 0,
                    total: 0,
            PaihangList:[
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },
                {
                    imgurl:'https://easyreadfs.nosdn.127.net/OQ6_Oqqfg4BZLOipfr5c7w==/8796093024006730994?imageView&quality=90&thumbnail=114y160',
                    name:'个体崛起',
                    host:'陈立飞',
                    message:'一本帮助普通人实现爆发式成长的人生规划书，教我们用高效方法循序渐进地撑起自己的野心。'
                },

            ],
        }
    },
    methods:{

        change() {
            if (this.index + 1 >= this.total) {
                this.index = 0
            } else {
                this.index++
            }
        },
        resize() {

            this.$nextTick(() => {
                this.$refs.title.forEach(item => {
                    item.style.width = this.width
                })
                this.$refs.author.forEach(item => {
                    item.style.width = this.width
                })
                this.$refs.result.forEach(item => {
                    item.style.width = this.width
                })
            })
        },
        resultText(item) {
            if (item && item.type && item.result) {
                switch (item.type) {
                    case 1:
                        return this.$t('home.sameAuthor').replace('$1', item.result)
                    case 2:
                        return this.$t('home.sameReader').replace('$1', item.result)
                    case 3:
                        return this.$t('home.readPercent').replace('$1', item.percent).replace('$2', item.result)
                }
            }
        },
        secondenter(){
            console.log('aaaaa')
            console.log(this.showmessage)
            this.showmessage=false;
            console.log('aaaaa')
        },
        onceenter(){
            this.showmessage=true;
        },

    },
    computed:{
        showData() {
            if (this.data) {
                return [
                    this.data[this.index],
                    this.data[this.index + this.total],
                    this.data[this.index + this.total * 2]
                ]
            } else {
                return []
            }
        }
    },
        watch: {
            data(v) {
                this.total = v.length / 3
            }
        },

}
</script>

<style>
    .btn {
        font-size:12px;
        color: rgba(64, 158, 255, 1);
        float: right;
    }
    .tab-item ul li {
        float: left;
        padding: 20px;
        width: 308px;

        cursor: default !important;
    }
    .m-focus {
        position: relative;
    }
    .f-cb::after{
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }
    .m-focus .tabs {
        height: 32px;
        position: absolute;
        top: -41px;
        left: 93px;
    }
    .m-focus .tabs ul li {
        display: inline;
        float: left;

        height: 32px;
        line-height: 32px;
        text-align: center;
        cursor: pointer;
    }
    .m-focus .tabs ul li span {
        font-size: 14px;
        color: #655;
    }
    .m-focus .tabs ul li.crt span {
        color: #c9483c;
    }

    .m-focus .tabs ul li span:after {
        content: "|";
        color: #a1a1a1;
        padding: 0 10px;
        font-size: 12px;
    }
    .m-focus .tabs ul li.ll span:after {
        content: "";
    }
    .m-focus .tabs ul li span:after {
        content: "|";
        color: #a1a1a1;
        padding: 0 10px;
        font-size: 12px;
    }
    .m-focus .book li, .m-focus .rss li {
        float: left;
        padding: 20px;
        width: 285px;
        border-right: 1px solid #ebe6e1;
    }
    .m-book-info {
        position: relative;
    }


</style>
